<!DOCTYPE html>
<html>
<head>
  <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> 
  <title>08-函数进阶</title>
  <style type="text/css">
  * {
    padding: 0;
    margin: 0;
  }
    </style>
</head>
<body>
  <div class="container">
    <h1>08-函数进阶</h1>
  </div>
  <script src="https://cdn.staticfile.org/jquery/3.2.0/jquery.js"></script>
  <script src="index.js"></script>
  <script type="text/javascript">
  // 什么时候使用箭头
  setTimeout(function () {
    console.log(this);  // window
  }, 1000)
  
  setTimeout(() => {
    console.log(this); // 向上查找也是window
  }, 1000)


  // 问题: 箭头函数中的this是如何查找的了?
  // 答案: 向外层作用域中, 一层层查找this, 直到有this的定义.
  const obj = {
    aaa() {
      setTimeout(function () {
        console.log(this); // window
      })
  
      setTimeout(() => {
        // 箭头函数沿着作用域向上查找
        console.log(this); // obj对象
      })
    }
  }
  
  obj.aaa()

  </script>
</body>
</html>